<template>
  <div class="home">

    <app-head title="精选" :noneBack="true" v-if="false"></app-head>

    <label class="search" @click="toSearch">
      <span class="search__text" v-if="!isSearch">
        <img class="search__icon" src="@/assets/img/icon_search.png"> 游戏搜索
      </span>
      <input class="search__input" type="text" @blur="cancelSearch" @keyup.13="search" v-model="keyword" />
    </label>

    <div class="topads" v-if="playIndex.hometopper.count">
      <Swiper :content="topads" :autoplay="true" @handleSwiperClick="handleSwiperClick" />
    </div>

    <template v-for="(item, index) in playIndex.special.list">
      <GameList :title="item.topic_name" :content="item.game_list" direction="row" :morelink="`/list?id=${item.topic_id}&type=tag`" :key="`gamelist${index}`" v-if="!index"/>

      <GameList :title="item.topic_name" :content="item.game_list" item="full" :morelink="`/list?id=${item.topic_id}`" :key="index" v-if="index"/>
      <img class="topic__ad" :src="item.image" @click="toGame(item.game_id, item.game_url)" :key="`gamelist${index}`" v-if="index">
    </template>

    <div class="app" v-if="appDown">
      <a href="javascript:;" class="app__close" @click="hideAppDown"></a>
      <img :src="playIndex.app_down.app_basic_down_icon" class="app__icon">
      <div class="app__info">
        <p class="app__name">{{playIndex.app_down.app_basic_down_name}}</p>
        <p class="app__cnt">{{playIndex.app_down.app_basic_down_cnt}}</p>
      </div>
      
      <button class="app__down" @click="playGame(playIndex.app_down.app_down_url)" data-clipboard-action="copy" :data-clipboard-text="playIndex.app_down.huoagentcode">安全下载</button>
    </div>
    <TabBar/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TabBar from '@/components/tab/Bar'
import Swiper from '@/components/common/Swiper'
import GameList from '@/components/game/List'
import Clipboard from 'clipboard'

export default {
  name: 'home',
  components: {
    TabBar,
    Swiper,
    GameList
  },
  computed: {
    ...mapGetters([
      'playIndex',
      'appDown'
    ]),
    topads () {
      let ads = []
      this.playIndex.hometopper.list.map(item => {
        ads.push(item.image)
      })
      return ads
    }
  },
  data () {
    return {
      isSearch: false,
      keyword: '',
      isAndroid:false
    }
  },
  methods: {
    toSearch () {
      this.isSearch = true
    },

    cancelSearch () {
      this.isSearch = false
      this.keyword = ''
    },

    search () {
      if (this.keyword) {
        this.$router.push(`/list?search=${this.keyword}`)
      }
    },

    handleSwiperClick (index) {
      let { url, target_id: id } = this.playIndex.hometopper.list[index]
      if (url) {
        window.location.href = url
      } else if (id) {
        this.$router.push(`/game?id=${id}`)
      }
    },

    toGame (id, url) {
      if (url) {
        window.location.href = url
      } else {
        this.$router.push(`/game?id=${id}`)
      }
    },
    isShowAppDown(){
      var ua = navigator.userAgent.toLowerCase();
      if (/android|adr/gi.test(ua)) {
        // 安卓
        this.isAndroid=true
      }
    },
    hideAppDown () {
      this.$store.commit('SET_APP_DOWN_STATUS', {
        status: false
      })
    },
  },
  mounted() {
    this.isShowAppDown()
  },
  created () {
    let clipboard = new Clipboard('.item__btn')
    clipboard.on('success', e => {
    })
    clipboard.on('error', e => {
    })
  }
}
</script>

<style scoped lang="scss">
.home {
  padding-bottom: 0.51rem;
}

.app {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: flex;
  height: 0.7rem;
  left: 0;
  padding: 0 0.15rem;
  position: fixed;
  width: 100%;
  z-index: 1;

  &__close {
    background-image: url(../assets/img/icon_app_close.png);
    background-size: 100% 100%;
    height: 0.22rem;
    position: absolute;
    right: 0.15rem;
    top: -0.11rem;
    width: 0.22rem;
  }

  &__icon {
    border-radius: 0.1rem;
    height: 0.52rem;
    margin-right: 0.09rem;
    width: 0.52rem;
  }

  &__info {
    color: #fff;
    flex: 1;
    font-size: 0.12rem;
  }

  &__name {
    font-size: 0.17rem;
    font-weight: bold;
    margin-bottom: 0.02rem;
  }

  &__down {
    background-color: #FF8C2D;
    border-radius: 0.15rem;
    color: #fff;
    font-size: 0.15rem;
    font-weight: bold;
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.2rem;
  }
}

.search {
  background-color: #f5f5f5;
  border-radius: 0.05rem;
  color: #999;
  display: block;
  font-size: 0.13rem;
  height: 0.34rem;
  line-height: 0.22rem;
  margin: 0.15rem;
  position: relative;
  text-align: center;

  &__text {
    align-items: center;
    display: flex;
    height: 0.34rem;
    justify-content: center;
  }

  &__icon {
    height: 0.22rem;
    width: 0.22rem;
  }

  &__input {
    background-color: transparent;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
  }
}

.topads {
  border-radius: 0.1rem;
  height: 1.74rem;
  margin: 0.15rem;
  overflow: hidden;
}

.topic__ad {
  margin: -0.04rem 0 0.2rem;
  width: 100%;
}
</style>
